<!-- 人事-考勤管理-班次设置 -->
<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="班次名称" prop="name" label-width="fit-content">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入班次名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-160px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
          @click="addFn"
          v-hasPermi="['school:attendance:setting:shift:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap v-loading="loading">
    <el-table :data="tableData" :height="tableHeight" style="width: 100%">
      <el-table-column prop="name" label="班次名称" width="200" />
      <el-table-column prop="position" label="考勤时间" width="340">
        <template #default="scope">
          {{ scope.row.times[0].first_day_after == 0 ? '当日' : '次日' }}
          {{ scope.row.times[0].work_hours }} -
          {{ scope.row.times[0].second_day_after == 0 ? '当日' : '次日'
          }}{{ scope.row.times[0].off_hours }}
          <span v-if="scope.row.times.length > 1"
            >、 {{ scope.row.times[1].first_day_after == 0 ? '当日' : '次日' }}
            {{ scope.row.times[1].work_hours }} -
            {{ scope.row.times[1].second_day_after == 0 ? '当日' : '次日'
            }}{{ scope.row.times[1].off_hours }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="card.name" label="创建人">
        <template #default="scope">{{ scope.row.card ? scope.row.card.name : '--' }}</template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="updated_at" label="最后更新时间" />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <!-- <el-button
                type="text"
                @click="checkFn(scope.row)"
                v-hasPermi="['school:attendance:setting:shift:check']"
                >查看</el-button
              > -->

          <el-button
            type="text"
            @click="editFn(scope.row)"
            v-hasPermi="['school:attendance:setting:shift:update']"
            >编辑</el-button
          >

          <el-button
            type="text"
            v-if="scope.row.id !== 2"
            @click="deleteFn(scope.row)"
            v-hasPermi="['school:attendance:setting:shift:delete']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="where.page"
      v-model:limit="where.limit"
      @pagination="pageChange"
    />
  </ContentWrap>
  <!-- 新增班次 -->
  <addShift ref="addShift" @get-list="getList" />
</template>

<script>
import { attendanceShiftListApi, deleteShiftListApi } from './mock'
import addShift from './components/addShift.vue'
// import oaFromBox from '@/components/common/oaFromBox'
export default {
  components: { addShift },
  data() {
    return {
      loading: false,
      type: 'add',
      total: 0,
      where: {
        page: 1,
        limit: 15
      },
      queryParams: {
        name: ''
      },
      tableData: [],
      search: [
        {
          field_name: '班次名称或创建人',
          field_name_en: 'name',
          form_value: 'input'
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },

  methods: {
    confirmData(data) {
      if (data == 'reset') {
        this.where = {
          page: 1,
          limit: 15
        }
        this.getList(1)
      } else {
        this.where = { ...this.where, ...data }
        this.getList(1)
      }
    },
    async getList(val) {
      if (val) {
        this.where.page = val
      }
      this.loading = true
      const result = await attendanceShiftListApi(this.where)
      this.loading = false
      this.total = result.data.count
      this.tableData = result.data.list
    },

    deleteFn(val) {
      this.$modalSure('你确定要删除这条数据吗').then(() => {
        deleteShiftListApi(val.id).then((res) => {
          this.getList()
        })
      })
    },
    handleQuery() {},
    resetQuery() {
      this.$refs.queryFormRef.resetFields()
    },
    pageChange() {
      this.getList()
    },
    handleSizeChange(val) {
      this.where.limit = val
      this.getList()
    },
    addFn() {
      this.$refs.addShift.openBox()
    },
    editFn(val) {
      this.$refs.addShift.openBox(val.id, 'edit')
    },
    checkFn(val) {
      this.$refs.addShift.openBox(val.id, 'check')
    }
  }
}
</script>

<style lang="scss" scoped>
.from {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.card-box {
  min-height: calc(100vh - 65px);
}
</style>
